<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .s1 {
        background: rgb(248, 215, 215);
      }
      .s2 {
        background: rgb(246, 248, 215);
      }
      .s3 {
        background: rgb(215, 221, 248);
      }

      .active {
        border: rgb(17, 0, 255) 5px solid;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <template id="t1">
      <div>
        <h1>todolist</h1>

        <p>
          <!-- 添加 -->
          <input type="text" v-model="form.title" />
          <button @click="add">+</button>
        </p>

        <p>
          <!-- 过滤 -->
          <button :class="{active:cstatus===''}" @click="changeStatus('')">
            全部
          </button>
          <button
            class="s1"
            :class="{active:cstatus===1}"
            @click="changeStatus(1)"
          >
            未完成
          </button>
          <button
            class="s2"
            :class="{active:cstatus===2}"
            @click="changeStatus(2)"
          >
            进行中
          </button>
          <button
            class="s3"
            :class="{active:cstatus===3}"
            @click="changeStatus(3)"
          >
            已完成
          </button>
        </p>

        <!-- 数据展示 -->
        <table border="1px">
          <thead>
            <tr>
              <th>标题</th>
              <th>状态</th>
              <th>修改状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :class="status[li.status].cls" v-for="li in lists" :key="li.id">
              <td>{{li.title}}</td>
              <td>{{status[li.status].text}}</td>
              <td>
                <button
                  v-show="li.status!==1"
                  @click="changeStatusById(li.id,1)"
                >
                  未完成
                </button>
                <button
                  v-show="li.status!==2"
                  @click="changeStatusById(li.id,2)"
                >
                  进行中
                </button>
                <button
                  v-show="li.status!==3"
                  @click="changeStatusById(li.id,3)"
                >
                  已完成
                </button>
              </td>
              <td><button @click="remove(li.id)">X</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
    <script>
      const request = axios.create({
        baseURL: "http://127.0.0.1:3009",
      });
      // 数据驱动视图
      const vm = new Vue({
        el: "#app",
        template: "#t1",
        data: {
          cstatus: "",
          form: {
            title: "",
          },
          status: {
            1: {
              text: "未完成",
              cls: "s1",
            },
            2: {
              text: "进行中",
              cls: "s2",
            },
            3: {
              text: "已完成",
              cls: "s3",
            },
          },
          lists: [],
        },
        created() {
          // ① 获取数据
          this.getLists();
        },
        methods: {
          async changeStatusById(id, status) {
            await request.patch(`/lists/${id}`, { status });
            // 重新获取数据
            this.getLists();
          },
          async remove(id) {
            //确认是否删除
            if (confirm("确定删除吗") === false) return;
            // 删除
            await request.delete(`/lists/${id}`);
            // 重新获取数据
            this.getLists();
          },
          async add() {
            // 不能为空
            if (this.form.title === "") {
              return;
            }
            // 添加
            await request.post("/lists", {
              title: this.form.title,
              status: "1",
            });
            this.form.title = "";
            // 重新获取数据
            this.getLists();
          },

          changeStatus(status) {
            // 过滤
            this.cstatus = status;
            this.getLists();
          },
          async getLists() {
            // 获取数据
            const where = {
              params: {},
            };
            if (this.cstatus !== "") {
              where.params.status = this.cstatus;
            }
            const res = await request.get("/lists", where);
            // ② 将数据放到响应式变量中
            this.lists = res.data;
          },
        },
      });
    </script>
  </body>
</html>
